<script lang="ts" setup>
import { QuestionCategoriesListVO } from '../data'

defineProps<{
  items: QuestionCategoriesListVO[]
}>()
</script>

<template>
  <div class="rounded-xl grid lg:grid-cols-4 md:grid-cols-3 relative sm:grid-cols-2 gap-6">
    <div
      v-for="{ id, name, description } of items"
      :key="id"
      class="border-zinc-200 border rounded-xl grid p-4.5! bg-white grid-rows-[min-content_1fr] grid-cols-[min-content_1fr] gap-3 items-center"
    >
      <div class="row-span-2 bg-zinc-100 size-12"></div>
      <div class="col-start-2 text-lg text-zinc-800">{{ name }}</div>
      <p :title="description" class="col-start-2 text-zinc-400 text-nowrap text-ellipsis overflow-hidden">
        {{ description }}
      </p>
    </div>
  </div>
</template>
